<template>
	<app-layout>
		<view>
			<!-- 申请页面背景图片以及待审核页面背景图片 -->
			<image v-if="custom_setting.apply.apply_head_pic" :src="custom_setting.apply.apply_head_pic" class="add-bg">
			</image>
			<!-- 未在申请分销商 -->
			<view class="add-form">
				<view class="add-default">
					<!-- <view class="add-info share-name dir-left-nowrap">
						<view>欢迎加入</view>
						<view class="mall-name t-omit">{{mall.name}}</view>
						<view>，请填写申请信息</view>
					</view> -->
					<!-- <view class="add-info">
						<view class="add-label">邀请人</view>
						<view class="share-user">
							<text>{{parent_name}}</text>(请核对)
						</view>
					</view> -->
					<view class="add-info">
						<view class="add-label">
							<text style="color: #09ba07">*</text>联系人
						</view>
						<view class="add-input">
							<input v-model="name" placeholder="请填写联系人"
								placeholder-style="font-size: 20rpx;color: #cdcdcd" />
						</view>
					</view>
					<view class="add-info">
						<view class="add-label">
							<text style="color: #09ba07">*</text>手机号码
						</view>
						<view class="add-input">
							<input v-model="phone" type="number" placeholder="请填写手机号码"
								placeholder-style="font-size: 20rpx;color: #cdcdcd" />
						</view>
					</view>
				</view>
				<!-- <view class="add-default add-diy-form" v-if="share_setting.form_status == 1">
					<app-diy-form :datePadding="0" :itemHeight="66" :showRequiredIcon="true" @input="handleFormInput"
						labelPosition="top" :list="share_setting.form" :labelFs28="true"></app-diy-form>
				</view> -->
				<!-- <view class="add-default add-diy-form">
					<view class="add-info" style="font-size:13px;">
						<view class="read" @click="toRead">
							<image src="/static/image/icon/icon-uncheck.png" v-if="read == false"></image>
							<image :class="[`red-background`]" src="/static/image/icon/icon-checkbox-checked.png"
								v-else></image>
						</view>
						我已经阅读并了解
						<text style="color:#014c8c"
							@click="protocol = true">【{{custom_setting.apply.share_apply_pact.name ? custom_setting.apply.share_apply_pact.name : custom_setting.apply.share_apply_pact.default}}】</text>
					</view>
				</view> -->
				<view class="submit">
					<view @click="subscribe">
						<button
							:style="{'background-color':`${custom_setting.apply.apply_btn_background}`,'border-radius':`${custom_setting.apply.apply_btn_round}`,'color':`${custom_setting.apply.apply_btn_color}`}">
							确定成为分销员
						</button>
					</view>
				</view>
			</view>
			<!-- 特权 -->
			<!-- <view class="other" v-if="custom_setting.apply.apply_end_pic">
				<image @load="imageLoad" :style="{'height':`${height}rpx`}" class="end-img"
					:src="custom_setting.apply.apply_end_pic"></image>
			</view> -->
			<!-- 分销协议（modal模式） -->
			<!-- <view class="modal" v-if="protocol">
				<view class="protocol">
					<view class="protocol-name">
						{{custom_setting.apply.share_apply_pact.name ? custom_setting.apply.share_apply_pact.name : custom_setting.apply.share_apply_pact.default}}
					</view>
					<view class="protocol-content">
						<text>{{share_setting.agree}}</text>
					</view>
					<view @click="protocol=false;read=true">
						<view class="read-over">我已阅读</view>
					</view>
				</view>
			</view> -->
		</view>
	</app-layout>
</template>

<script>
	import {
		mapState
	} from "vuex";
	import AppDiyForm from "../../../components/page-component/app-diy-form/app-diy-form";

	export default {
		data() {
			return {
				status: null,
				mallName: '',
				name: '',
				phone: '',
				parent_name: '',
				height: 0,
				form: {},
				read: false,
				protocol: false,
				uid: 0,
				mid: 0,
			}
		},
		computed: {
			...mapState({
				mall: state => state.mallConfig.mall,
				custom_setting: state => state.mallConfig.share_setting_custom,
				share_setting: state => state.mallConfig.share_setting,
			})
		},
		components: {
			AppDiyForm
		},
		methods: {
			handleFormInput(data) {
				const result = [];
				for (let i in data) {
					result[i] = {
						key: data[i].key,
						label: data[i].name,
						value: data[i].value,
						required: data[i].is_required,
					};
				}
				this.form = result;
			},
			toRead() {
				this.read = !this.read
			},

			imageLoad: function(e) {
				var $width = e.detail.width; //获取图片真实宽度
				var $height = e.detail.height; //获取图片真实高度
				this.height = $height * (702 / $width)
			},
			subscribe() {
				let that = this;
				let read = 0;
				/* if (this.form.length > 0) {
					for (let item of this.form) {
						if (item.required == 1) {
							if (!item.value) {
								uni.showToast({
									title: '请填写' + item.label,
									icon: 'none',
									duration: 1000
								});
								return false
							}
							if (item.key == 'img_upload' && Array.isArray(item.value)) {
								for (let img of item.value) {
									if (!img) {
										uni.showToast({
											title: '请填写' + item.label,
											icon: 'none',
											duration: 1000
										});
										return false
									}
								}
							}
						}
					}
				} */
				// if (this.read == true) {
				read = 1;
				if (!that.name) {
					uni.showToast({
						title: '请输入联系人',
						icon: 'none',
						duration: 1000
					});
					return
				} else if (!that.phone) {
					uni.showToast({
						title: '请输入手机号码',
						icon: 'none',
						duration: 1000
					});
					return
				} else if (!(/0?(1)[0-9]{10}/.test(that.phone))) {
					uni.showToast({
						title: '请输入正确的手机号码',
						icon: 'none',
						duration: 1000
					});
					return
				}
				// let template_message = [this.template_message]
				// this.$subscribe(this.template_message).then(res => {
				that.submit();
				// }).catch(res => {
				// 	this.submit(read);
				// });
				// } else {
				// 	uni.showToast({
				// 		title: '请先查看分销协议并同意',
				// 		icon: 'none',
				// 		duration: 1000
				// 	});
				// }
			},
			submit() {
				let that = this;
				uni.showLoading({
					title: '提交中...'
				});
				let para = {
					mch_id: that.mid,
					user_id: that.uid,
					nickname: that.name,
					mobile: that.phone,
					isauto: 1,
					// username: that.name,
					// password: '123456',
					// status: 1,
					// type: 0,
					// review_status: 0,
					// sort: 1
				}
				that.$request({
					url: that.$apiSol.solitaire.applydis,
					data: para,
					method: 'post'
				}).then(response => {
					console.log(response);
					uni.hideLoading();
					if (response.code == 0) {
						// uni.showToast({
						// 	title: '申请成功',
						// 	icon: 'none'
						// })
						uni.switchTab({
							url: '/pages/my/my'
						})
						console.log("response",response);
					} else if (response.code == 1) {
						uni.showModal({
							title: '提示',
							content: response.msg,
							success: function (res) {
									if (res.confirm) {
										uni.switchTab({
											url: '/pages/index/index'
										})
									} else if (res.cancel) {
										uni.switchTab({
											url: '/pages/index/index'
										})
									}
								}
						})
					}
					
					/*
					if (response.code == 0) {
						uni.showToast({
							title: response.msg,
							duration: 1000
						});
						setTimeout(function() {
							uni.navigateBack({
								delta: 1
							})
						}, 500)
					} else {
						if (that.share_setting.form_status == 0 && response.msg == '请填写表单') {
							uni.showToast({
								title: '申请条件有所变化，请重新填写',
								icon: 'none',
								duration: 1000
							});
						} else {
							uni.showToast({
								title: response.msg,
								icon: 'none',
								duration: 1000
							});
						}
					} */
				}).catch(e => {
					uni.hideLoading();
					if (e.msg) {
						uni.showToast({
							title: e.msg,
							icon: 'none',
							duration: 1000
						});
					}
				})
			}
		},

		onLoad(options) {
			let that = this;
			
			if (options.scene) {
				let params = decodeURIComponent(options.scene)
				let option = this.$utils.urlParamsToObject(params)
				console.log("cppppppppp",option);
				that.uid = option.id
				that.mid = option.m
			} else if (options.id) {
				that.uid = options.id
				that.mid = options.m
			}

			that.$showLoading({
				type: 'global',
				text: '加载中...'
			});

			/* uni.setNavigationBarTitle({title: that.custom_setting.apply.share_apply.name ? that.custom_setting.apply.share_apply.name :that.custom_setting.apply.share_apply.default}); */
			that.$request({
				url: that.$apiSol.user.user_info,
			}).then(response => {
				that.$hideLoading();
				if (response.code === 0) {
					// that.parent_name = response.data.identity.parent_name
					that.uid = response.data.options.user_id
				}
				console.log("cpppppppppp",response);
			})
		},
		onShow() {
			// this.$store.dispatch('mallConfig/actionResetConfig');
		}
	}
</script>

<style scoped lang="scss">
	.add-bg {
		height: #{300rpx};
		width: 100%;
		display: block;
		margin-bottom: #{20rpx};
		background-color: #f7f7f7;
	}

	.add-form {
		padding: 0 #{24rpx};
		font-size: #{30rpx};
		color: #353535;
		margin: 36rpx auto;

		.add-default {
			background-color: #fff;
			border-radius: #{16rpx};
			padding: 0 #{10rpx} #{35rpx};
			margin-bottom: #{20rpx};

			&.add-diy-form {
				padding-bottom: 0;
				padding: #{10rpx} #{24rpx};

				.add-info {
					border-bottom: 0;
					padding: #{24rpx} 0;
				}
			}

			.add-info {
				width: 100%;
				padding: #{10rpx} #{24rpx};
				border-bottom: #{1rpx} solid #e2e2e2;

				.red-background {
					background-color: #09ba07;
				}

				.add-label {
					height: #{45rpx};
					line-height: #{45rpx};
					font-size: #{28rpx};
				}

				.add-input {
					height: #{75rpx};

					input {
						height: #{65rpx};
						padding-top: #{5rpx};
					}
				}

				&.share-name {
					height: #{90rpx};
					line-height: #{90rpx};
					padding: 0 #{10rpx};

					.mall-name {
						max-width: #{300rpx};
						color: #09ba07;
					}
				}

				.share-user {
					color: #666;
					height: #{75rpx};
					line-height: #{75rpx};

					>text {
						color: #09ba07;
					}
				}

				.read {
					width: #{32rpx};
					height: #{32rpx};
					float: left;
					margin-right: #{10rpx};

					image {
						height: 100%;
						width: 100%;
						display: block;
					}
				}
			}
		}
	}

	.submit {
		background-color: #f7f7f7;
		margin: 0 #{-24rpx};
		padding: #{24rpx};

		button {
			color: #fff;
			font-size: #{30rpx};
			font-weight: bold;
			height: #{80rpx};
			border-radius: #{40rpx};
			line-height: #{80rpx};
		}
	}

	.other {
		background-color: #fff;
		padding: 0 #{24rpx};
		color: #353535;
		font-size: #{30rpx};

		.end-img {
			width: 100%;
		}
	}

	.modal {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		height: 100%;
		width: 100%;
		z-index: 99;
		background-color: rgba(0, 0, 0, 0.3);

		.protocol {
			position: relative;
			z-index: 99;
			background-color: #fff;
			width: 80%;
			border-radius: #{20rpx};
			margin: #{100rpx} auto;

			.protocol-name {
				height: #{100rpx};
				text-align: center;
				line-height: #{100rpx};
				color: #666;
			}

			.protocol-content {
				padding: #{10rpx} #{20rpx};
				height: #{720rpx};
				overflow: auto;
				color: #353535;
			}

			.read-over {
				text-align: center;
				height: #{100rpx};
				line-height: #{100rpx};
				background-color: #09ba07;
				color: #fff;
				font-size: #{30rpx};
				border-bottom-right-radius: #{20rpx};
				border-bottom-left-radius: #{20rpx};
			}
		}
	}
</style>
